<template>
  <!--  宫格 start-->
  <div class="grid">
    <div @click="router.push(item.url)" class="grid-item" v-for="(item,index) in props.list" :key="index">
      <van-icon class="icon" :name="item.icon"></van-icon>
      <h1>{{ item.name }}</h1>
    </div>
  </div>
  <!--  宫格 end-->
</template>

<script setup>
import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
//传递过来的数据
const props = defineProps(['list'])
const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()


</script>

<style scoped lang="scss">
.grid {
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;

  .grid-item {
    width: 15%;
    margin: 15px;

    .icon {
      margin-left: 10px;
      font-size: 30px;
    }

    h1 {
      font-size: 10px;
      margin-top: 5px;
    }
  }
}
</style>
